<template>
    <div class="searchBox">
        <div class="operBox flex">
            <div class="left">
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </div>
            <slot name="rightBtn"></slot>
        </div>
        <div class="moreBox" v-if="showMore">
            <i class="el-icon-error closeSearch" @click="showMore=false"></i>
            <slot name="searchMain"></slot>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                showMore:false
            }
        },
        methods: {
            onSubmit(){
                if(this.showMore){
                    this.$message({
                        message: '我查询了！',
                        type: 'success'
                    });
                    this.$emit('search');
                }else{
                    this.showMore = true;
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
.moreBox{
    position: relative;
    border:1px solid #d8d8d8;
    margin-top:15px;
    padding:15px 15px 0;
    border-radius: 0.2em;
    .closeSearch{
        position: absolute;
        font-size:18px;
        color:#409EFF;
        right:-8px;
        top:-8px;
        cursor: pointer;
    }
}
</style>